<template>
  <view class="service-info">
    <image
      class="service-avatar"
      src="@/static/image/common/test.png"
      mode="aspectFill"
    />

    <view class="content">
      <view class="title"> 中式推拿·SPA </view>
      <view class="tips"> ￥298.0/90分钟 </view>
      <view class="price-view flex flex-middle flex-between">
        <view class="left flex flex-middle">
          已优惠
          <text>¥10.0</text>
        </view>
        <view class="right flex flex-middle">
          合计
          <text class="icons">¥</text>
          <text>288.0</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.service-info {
  background: #fff;
  border-radius: 6px;
  padding: 16px;
  overflow: hidden;
  color: #232323;

  .price-view {
    margin-top: 16px;

    .right {
      font-size: 13px;

      .icons {
        font-size: 12px;
        margin-bottom: -2px;
        margin-left: 4px;
      }

      text {
        font-size: 17px;
      }
    }

    .left {
      font-size: 13px;

      text {
        color: #ea473f;
        margin-left: 4px;
      }
    }
  }

  .title {
    font-size: 13px;
    font-weight: bold;
  }

  .tips {
    font-size: 11px;
    color: #9a9ea9;
    margin-top: 2px;
  }

  .content {
    padding-left: 84px;
  }

  .service-avatar {
    float: left;
    border-radius: 4px;
    width: 72px;
    height: 72px;
  }
}
</style>